<template>
  <TodoInput></TodoInput>
  <TodoList :todoLists="todoLists"></TodoList>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TodoInput from './components/TodoInput/index.vue'
import TodoList from './components/TodoList/index.vue'
import { onMounted , computed} from 'vue'
import { IUseTodo, useTodo } from './hooks/TodoInput/index'
import { useStore, Store } from 'vuex';

export default defineComponent({
  name: 'App',
  components:{
    TodoInput,
    TodoList
  },
  setup(){

    const { setTodoList } : IUseTodo = useTodo()
    const store : Store<any> = useStore()

    onMounted(() => {
      setTodoList()
    })

    const todoLists = computed( ()=> store.state.list )

    return {
      todoLists
    }
  }
});
</script>

